<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>渐变</title>

        <style>
            #app {
                width: 800px;
                height: 600px;

                background-color: aqua;

                /* 背景 颜色渐变(gradient)
                   linear-gradient 线性渐变
                   第一个指明渐变的方向
                   后面的几个值指明了渐变的几个关键颜色

                   radial-gradient 径向渐变 不需要指定方向，直接指定颜色就好了（使用较少）
                */
                /* background-image: linear-gradient(0deg, red, orange, yellow, green, blue, aqua, violet); */
                background-image: radial-gradient(red, orange, yellow, green, blue, aqua, violet);
                /* background-position: 50px 50px; */
            }
        </style>
    </head>
    <body>
        <div id="app">

        </div>
    </body>
</html>
